<template>
    <div id="map" ref="mapContainer"></div>
</template>

<script>
import { Scene, RasterLayer, LineLayer, MouseLocation, PointLayer } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
// import mapboxgl from "mapbox-gl";
import mapConfig from '../../core/map';
import operationMixin from './mixin/operation';
import { EventBus } from '../../utils/bus';
import { mapMutations, mapGetters } from 'vuex';
import PiplineProjectController from '../../api/Controller/PiplineProjectController';
import Vue from 'vue';
import MapboxDraw from "@mapbox/mapbox-gl-draw";
import "@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css";
import WKT from "terraformer-wkt-parser"
import axios from 'axios';
import config from '@/core/config/'
import { getToken, setToken, getAppId } from '@/utils';

export default {
    name: 'MapComponent',
    data() {
        return {
            map: null,
            scene: null,
            token: "",//天地图token
            locateIcon: null,//地图定位图标
            pointIconList: ["location", "Default", "渗水井", "变径", "沉泥井", "冲洗井", "出地", "出气井", "出水口", "跌水井", "阀门", "非普查", "拐点", "化粪池", "进水口", "净化池", "排水泵站", "水封井", "通风井", "污箅", "污水井", "一般管线点", "溢流井", "雨箅", "雨水井", "预留口", "闸门井", "渗水井-污水", "变径-污水", "沉泥井-污水", "冲洗井-污水", "出地-污水", "出气井-污水", "出水口-污水", "跌水井-污水", "阀门-污水", "非普查-污水", "拐点-污水", "化粪池-污水", "进水口-污水", "净化池-污水", "排水泵站-污水", "水封井-污水", "通风井-污水", "污箅-污水", "污水井-污水", "一般管线点-污水", "溢流井-污水", "雨箅-污水", "雨水井-污水", "预留口-污水", "闸门井-污水"],
            draw: null,
            flowLineLayerData: {}, // 流动线图层数据
            maskLayerCount: 0,//蒙版层数量
            loadingMask: null,//加载蒙版
        };
    },
    mixins: [operationMixin],
    mounted() {
        let that = this;
        this.initMap();
        this.maskLayerCount = 0;
        this.loadingMask = null;
        EventBus.$off('changeLineStyle')
        /* 切换线图层样式*/
        EventBus.$on('changeLineStyle', (e) => {
            // ***dataList数组只能传入同一图层的数据***
            // dataList: [{
            //     layerId: '', //图层ID
            //     lineId: '', //线段主键值
            //     labelFields: [], //注记字段值
            //     flowDirect: '', //流向
            //     pipType: '' //管类型
            // }]
            // layerId: 图层ID
            // lineId: 线段主键值
            // labelFields: 两个注记字段值，数组形式传入，如['value1','value2']。不修改传null
            // flowDirect: 'reverse'。不修改传null
            // pipType: YS，WS。不修改传null
            if (!e.dataList || e.dataList.length === 0) {
                return;
            }
            let dataList = e.dataList;
            that.changeLineStyle(dataList);
        });

        EventBus.$off('changePointStyle')
        /* 切换管点图标和注记名称*/
        EventBus.$on('changePointStyle', (e) => {
            // ***dataList数组只能传入同一图层的数据***
            // dataList: [{
            //     layerId: '', //图层ID
            //     pointId: '', //点主键值
            //     pointType: '', //点类型（渗水井、雨水井、污水井等）。不修改传null
            //     labelFields: [], //注记字段值
            //     exRotation: '' //角度（顺时针旋转角度，0-360）。不修改传null
            // }]
            if (!e.dataList || e.dataList.length === 0) {
                return;
            }
            let dataList = e.dataList;
            that.changePointIconAnno(dataList);
        });

    },
    beforeDestroy() {
        // 移除事件监听，避免内存泄漏
        //   window.removeEventListener('resize', this.handleResize);
        this.destroyMap();
    },
    computed: {
        ...mapGetters(['getCurrentProjectConfig'])
    },
    methods: {
        initMap() {
            let that = this
            mapboxgl.accessToken = 'pk.eyJ1IjoiZ2ZoZ2o4IiwiYSI6ImNtZHgzd2pmNzEwcmIyam4xdHE1dDUzOWMifQ.uPtCr4n6qWi-TOT7-qwSsQ';
            this.map = new mapboxgl.Map({
                container: 'map', // container id
                // style: 'mapbox://styles/mapbox/streets-v11',//mapbox矢量底图
                glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
                style: {
                    version: 8,
                    sources: {},
                    layers: [],
                    glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
                }, // style object
                center: this.getCurrentProjectConfig.mapCenter,
                // center: [7.65, 45.053],
                zoom: 16,
                maxZoom: 28,
                minZoom: 1,
                crs: 'EPSG:4326',
                attributionControl: false,
                renderWorldCopies: true, // 允许无限循环渲染地图
                antialias: true,

                localFontFamily: undefined,
                localIdeographFontFamily: undefined,
            });

            // 修改鼠标样式为默认
            this.map.getCanvas().style.cursor = 'default';

            const scene = new Scene({
                id: 'map',
                map: new Mapbox({
                    mapInstance: that.map,
                    glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
                    // glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
                }),
                logoVisible: false,
                stencil: true,
                preserveDrawingBuffer: true,
                // glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
            });

            this.scene = scene;
            Vue.prototype.$map = this.map;
            // scene.on('loaded', () => {
            this.map.on('load', () => {
                // 初始化天地图底图
                that.initTdtMap();
                // 添加地图控件
                that.initControl();
                // 添加地图Icon
                that.initMapIcon();
                // 加载矢量数据(管线)
                // 通过vuex变量获取项目所有矢量图层
                // 需修改todo
                that.initVectorLayer();
                // that.initVectorLineLayer("/apis/guanxian.json", "guanxian");

                that.$emit('updateZoom', scene.getZoom());

                // 需修改todo
                // fetch('/apis/guanxian.json')
                //     // fetch('https://gw.alipayobjects.com/os/bmw-prod/98a5d9ec-be97-44bd-bff0-5742d929c003.json')
                //     .then((res) => res.json())
                //     .then((data) => {
                //         console.log("管线数据:", data);
                //         const layer = new LineLayer({})
                //             .source(data)
                //             .shape('line')
                //             .color('D_S', (v) => {
                //                 let num = Number(v);
                //                 if (num >= 200) {
                //                     return '#4F46E5'; //蓝色
                //                 } else {
                //                     return '#ff0000'; //红色
                //                 }
                //             })
                //             .animate({
                //                 interval: 1, // 间隔
                //                 duration: 2, // 持续时间，延时
                //                 trailLength: 0.2, // 流线长度
                //             });
                //         scene.addLayer(layer);
                //     });
            });

            // this.map.on('zoomend', (e) => {
            //   console.log(e)
            // })
            scene.on('mousemove', (e) => {
                that.$emit('updateLngLat', e.lngLat);
            });

            scene.on('zoomend', (e) => {
                that.$emit('updateZoom', scene.getZoom());
                // // 假设 map 是你的 Mapbox 地图实例
                let layers = that.map.getStyle().layers;

                for (let i = 0; i < layers.length; i++) {
                    if (layers[i].id.endsWith("-point")) {
                        console.log(layers[i].id)
                        // that.map.setLayoutProperty(layers[i].id, 'icon-allow-overlap', scene.getZoom() > 16)
                        that.map.setLayoutProperty(layers[i].id, 'text-allow-overlap', scene.getZoom() > 21)
                    }
                    // else if (layers[i].id.endsWith("-label")) {
                    //   console.log(layers[i].id)
                    //   that.map.setLayoutProperty(layers[i].id, 'line-cap', scene.getZoom() > 16 ? 'round' : 'butt)
                    // }
                }
            });

        },
        handleResize() {
            // 调用 Mapbox 的 resize 方法，触发地图重绘
            if (this.map) {
                this.map.resize();
            }
        },
        initTdtMap() {
            let that = this;
            this.map.addSource('tdt-img', {
                type: 'raster',
                tiles: [
                    'https://t1.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=' + mapConfig.tdtToken,
                ],
                tileSize: 256,
                minzoom: 1,
                maxzoom: 18
            });
            this.map.addLayer({
                id: 'tdt-img-layer',
                type: 'raster',
                source: 'tdt-img',
                minzoom: 0,
                maxzoom: 22,
                paint: {
                    'raster-resampling': 'linear',
                    'raster-opacity': 0.95
                }
            });

            this.map.addSource('tdt-cia', {
                type: 'raster',
                tiles: [
                    'https://t1.tianditu.gov.cn/DataServer?T=cia_w&X={x}&Y={y}&L={z}&tk=' + mapConfig.tdtToken,
                ],
                tileSize: 256,
                minzoom: 1,
                maxzoom: 18
            });
            this.map.addLayer({
                id: 'tdt-cia-layer',
                type: 'raster',
                source: 'tdt-cia',
                minzoom: 0,
                maxzoom: 22,
                paint: {
                    'raster-resampling': 'linear',
                    'raster-opacity': 0.95
                }
            });

            this.map.addSource('tdt-vec', {
                type: 'raster',
                tiles: [
                    'https://t1.tianditu.gov.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk=' + mapConfig.tdtToken,
                ],
                tileSize: 256,
                minzoom: 1,
                maxzoom: 18
            });
            this.map.addLayer({
                id: 'tdt-vec-layer',
                type: 'raster',
                source: 'tdt-vec',
                minzoom: 0,
                maxzoom: 22,
                paint: {
                    'raster-resampling': 'linear',
                    'raster-opacity': 0.95
                }
            });

            this.map.addSource('tdt-cva', {
                type: 'raster',
                tiles: [
                    'https://t1.tianditu.gov.cn/DataServer?T=cva_w&X={x}&Y={y}&L={z}&tk=' + mapConfig.tdtToken,
                ],
                tileSize: 256,
                minzoom: 1,
                maxzoom: 18
            });
            this.map.addLayer({
                id: 'tdt-cva-layer',
                type: 'raster',
                source: 'tdt-cva',
                minzoom: 0,
                maxzoom: 22,
                paint: {
                    'raster-resampling': 'linear',
                    'raster-opacity': 0.95
                }
            });
            // 默认隐藏矢量图层
            this.map.setLayoutProperty('tdt-vec-layer', 'visibility', 'none');
            this.map.setLayoutProperty('tdt-cva-layer', 'visibility', 'none');
        },
        initControl() {
            let that = this;
            this.map.addControl(new mapboxgl.NavigationControl(), 'bottom-right');
            this.map.addControl(new mapboxgl.ScaleControl(), 'bottom-left');
            this.initDraw();
        },
        initDraw() {
            let draw = new MapboxDraw({
                displayControlsDefault: false,
                controls: {
                    line_string: false,
                    // polygon: true,
                    point: false,
                    // trash: true
                },
                defaultMode: 'draw_polygon'
            });
            this.draw = draw;
            window.draw = draw; // 挂载到全局
            this.map.addControl(draw); // 添加到map对象
            this.map.on('draw.create', this.finishDraw);
        },
        finishDraw(e) {
            console.log("完成图形绘制", e, this.getCurrentProjectConfig)
            let projectId = this.getCurrentProjectConfig.projectId;

            if (e.features === undefined || e.features === null || e.features.length === 0) {
                this.$message.error("图形绘制失败")
                return;
            }

            try {
                let wktData = WKT.convert(e.features[0].geometry);
                console.log("WKT.convert(e.features[0].geometry)", WKT.convert(e.features[0].geometry))
                let params = {
                    projectId: projectId,
                    extent: wktData
                };
                this.downloadMDBFile(config.baseUrl + "admin/app/dc/ExportProjectData", params).catch(error => {
                    console.error('下载失败:', error);
                    // 处理错误（如弹窗提示）
                });

            }
            catch (e) {
                this.$message.error("转格式异常", e)
                console.log(e)
                loading.close();
            }
        },
        // 根据范围下载mdb
        downloadMDBFile(url, params) {
            let that = this;
            const loading = this.$loading({
                lock: true,
                text: '上传中...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            return axios({
                method: 'post',  // 或 post，根据后端要求
                url: url,
                headers: {
                    'Authorization': getToken(),
                    'Accept': 'application/json, application/octet-stream' // 明确接受两种类型
                },
                data: params, // POST 参数
                responseType: 'blob', // 关键：声明响应类型为二进制流
            }).then(response => {
                console.log("response", response)
                // 从响应头解析文件名
                const disposition = response.headers['content-disposition'];
                console.log("disposition", disposition)
                let filename = 'default.mdb'; // 默认文件名

                if (disposition) {
                    const filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
                    const matches = filenameRegex.exec(disposition);
                    if (matches && matches[1]) {
                        filename = matches[1].replace(/['"]/g, '');
                    }
                }

                // 创建 Blob 对象并下载
                const blob = new Blob([response.data], { type: response.headers['content-type'] });
                const downloadUrl = window.URL.createObjectURL(blob);
                const link = document.createElement('a');

                link.href = downloadUrl;
                link.setAttribute('download', filename);
                document.body.appendChild(link);
                link.click();

                // 清理资源
                link.remove();
                window.URL.revokeObjectURL(downloadUrl);

                loading.close();
                that.closeDraw();
                that.$parent.exportData();

            }).catch(e => {
                console.log("下载异常", e)
                that.$message.error("下载异常", e)
                e.close();
            });
        },
        // 关闭绘图
        closeDraw() {
            this.draw.trash();
        },
        // 加载地图图标
        initMapIcon() {
            // 使用 Promise.all 确保所有图标加载完成
            const loadPromises = this.pointIconList.map(item => {
                return new Promise((resolve) => {
                    const iconPath = require(`@/assets/map-icon/${item}.png`);
                    this.map.loadImage(iconPath, (error, image) => {
                        if (!error) {
                            this.map.addImage(item, image);
                        }
                        resolve();
                    });
                });
            });

            Promise.all(loadPromises).then(() => {
                console.log("所有地图图标加载完成");
            });
        },
        // 加载项目矢量图层
        initVectorLayer() {
            let that = this;
            let projectConfig = this.getCurrentProjectConfig;
            console.log("projectConfig111111111", projectConfig)
            if (!projectConfig || !projectConfig.data || !projectConfig.projectId) {
                this.$message.error("未找到项目配置");
                return;
            }
            this.loadingMask = this.$loading({
                lock: true,
                text: '加载中...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            let projectId = projectConfig.projectId;
            projectConfig.data.forEach((item, index) => {
                if (item.layerType === 'guanxian') {
                    that.initVectorLineLayer2(projectId, item.layerName, item.layerId);
                } else if (item.layerType === 'guandian') {
                    that.initVectorPointLayer(projectId, item.layerName, item.layerId);
                }
                this.maskLayerCount++;
            });
            // let vectorLayers = projectConfig.data.vectorLayers;
            // vectorLayers.forEach(layer => {
            //     that.initVectorLineLayer(layer.url, layer.sourceId);
            // });
        },
        // 加载管点矢量数据
        initVectorPointLayer(projectId, layerName, layerId) {
            let that = this;
            let params = {
                "projectId": projectId,
                "layerId": layerId
            };
            that.setVectorLayerKeys([{
                value: layerId,
                label: layerName
            }]);

            PiplineProjectController.ListLayerGeojson(this, params, null, { showMask: false }).then((res) => {
                console.log("加载管点矢量数据GetProjectLayerGeoJson：", res)
                // 拼接GeoJson数据
                let GeoJsonData = {
                    type: "FeatureCollection",
                    features: res.geoJsonFeatures
                };

                // 添加数据源
                that.map.addSource(layerId, {
                    type: 'geojson',
                    data: GeoJsonData,
                    generateId: true // 自动生成id,否则选中图形时没有feature-id
                });

                let annoFields = [];
                this.getCurrentProjectConfig.data.forEach(item => {
                    if (item.layerId === layerId) {
                        annoFields[0] = item.labelFields[0];//选择第一个
                        annoFields[1] = item.labelFields[1];//选择第二个
                    }
                });

                // 当前图层显示注记字段
                if (annoFields.length === 0 || annoFields === undefined) {
                    annoFields[0] = "EXP_NO";
                }

                console.log("annoFields:", annoFields);

                // 添加点图层（红圆点）   弃用
                // that.map.addLayer({
                //     id: layerId + "-point123123123",
                //     type: 'circle',
                //     source: layerId,
                //     'paint': {
                //         'circle-radius': 5,
                //         // 'circle-color': '#ff0000',
                //         'circle-color': [
                //             'case',
                //             ['boolean', ['feature-state', 'hover'], false],
                //             '#17b8be', // 选中时红色
                //             // ['>', ['to-number', ['get', 'D_S']], 150], '#17b8be',  // 属性值是字符串类型的数字，用to-number，大于150的值：蓝色
                //             '#FF0000',  // 默认红色
                //         ],
                //         'circle-opacity': 0.8

                //     },
                //     zIndex: 99999,
                // });

                // 只有一个注记字段
                if (annoFields.length < 2) {
                    // 添加注记图层
                    that.map.addLayer({
                        id: layerId + "-point",
                        type: 'symbol',
                        source: layerId,
                        'minzoom': 18,
                        'layout': {
                            // 'visibility': 'visible', // 可见性（可选，可选值为 none、visible，默认值为 visible）
                            'symbol-placement': 'point', // 符号的位置（可选，可选值为 point、line、line-center，默认值为 point）
                            //	--- point：符号在几何形状的点上
                            //	--- line：符号在几何形状的线上（几何形状只能为 LineString 或 Polygon）
                            //	--- line-center：符号在几何形状的线的中心点上（几何形状只能为 LineString 或 Polygon）
                            // 'symbol-spacing': 600, // 符号之间的距离（可选，值 >= 1，默认值为 250，单位：像素。只有 symbol-placement 为 line 时才有效）
                            'symbol-avoid-edges': false, // 是否避免边缘冲突（可选，默认值为 false。当为 true 时，符号不会超过切片的边缘）
                            'symbol-sort-key': 1, // 排序的参考值（可选，无默认值。值越大，越在上方）
                            'symbol-z-order': 'auto', // z 轴上的顺序控制（可选，可选值为 auto、viewport-y、source，默认值为 auto）
                            //	文本类属性（需要指定 text-field）
                            'text-rotation-alignment': 'auto', // 与 icon-rotation-alignment 类似
                            'text-pitch-alignment': 'auto', // 与 icon-pitch-alignment 类似
                            'text-field': ['get', annoFields[0]], // 文本所对应的字段（可选，默认值为 ''）
                            // 'text-font': ['Open Sans Blod', 'Arial Unicode MS Blod'], // 文本的字体集合（可选，默认值为 ['Open Sans Regular','Arial Unicode MS Regul
                            'text-size': 12, // 文本的大小（可选，默认值为 16，单位：像素）
                            'text-max-width': 10, // 文本的最大宽度，超过则折行（可选，默认值为 10，单位：ems）
                            'text-line-height': 1.2, // 文本的行高（可选，默认值为 1.2，单位：ems）
                            'text-letter-spacing': 0, // 文本的字符间距（可选，默认值为 0，单位：ems）
                            'text-justify': 'center', // 文本的水平对齐方式（可选，可选值为 auto、left、center、right。默认值为 center）
                            'text-anchor': 'bottom', // 文本与锚点的位置关系（可选，可选值为 center、left、right、top、bottom、top-left、top-right、bottom-left、bottom-right
                            'text-max-angle': 45, // 当 symbol-placement 为 line 或 line-center 时，文本相邻字符的最大夹角，默认 45 度
                            'text-rotate': 0, // 文本的顺时针旋转角度（可选，默认值为 0，单位：角度）
                            'text-padding': 8, // 文本的外边距（可选，值 >= 0，默认值为 2。可用于碰撞检测）
                            'text-keep-upright': false, // 当 icon-rotation-alignment 为 map，且 symbol-placement 为 line 或者 line-center 时，设置为 true 的话，可以避免文本上
                            'text-transform': 'none', // 文本大小写转换（可选，可选值为 none、uppercase、lowercase，默认值为 none）
                            'text-offset': [0, -1], // 图标的偏移量（可选，默认值为 [0, 0]）
                            'text-radial-offset': 0, // 文本的径向偏移量，优先级比 text-offset 高
                            'icon-allow-overlap': true, // 是否允许文本重叠（可选，默认值为 false。当值为 true 时，文本即使和其他符号触碰也会显示）
                            'text-allow-overlap': false, // 是否允许文本重叠（可选，默认值为 false。当值为 true 时，文本即使和其他符号触碰也会显示）
                            'text-ignore-placement': false, // 是否忽略文本位置（可选，默认值为 false。当值为 true 时，其他符号即使与此文本触碰也会显示）
                            'text-optional': true, // 文本是否可不显示（可选，默认值为 false。当值为 true 时，如果文本与图标碰撞，则显示图标）
                            'symbol-spacing': 25, // 图标间隔，默认为250

                            'icon-image': [ // icon图标，做判断，type_name为后端回传字段，判断type_name是否相等去显示图层
                                'case',
                                ['all', ['==', ['get', 'SUBSID'], "渗水井"], ['==', ['get', 'CODE'], "WS"]], "渗水井-污水",
                                ['all', ['==', ['get', 'SUBSID'], "变径"], ['==', ['get', 'CODE'], "WS"]], "变径-污水",
                                ['all', ['==', ['get', 'SUBSID'], "沉泥井"], ['==', ['get', 'CODE'], "WS"]], "沉泥井-污水",
                                ['all', ['==', ['get', 'SUBSID'], "冲洗井"], ['==', ['get', 'CODE'], "WS"]], "冲洗井-污水",
                                ['all', ['==', ['get', 'SUBSID'], "出地"], ['==', ['get', 'CODE'], "WS"]], "出地-污水",
                                ['all', ['==', ['get', 'SUBSID'], "出气井"], ['==', ['get', 'CODE'], "WS"]], "出气井-污水",
                                ['all', ['==', ['get', 'SUBSID'], "出水口"], ['==', ['get', 'CODE'], "WS"]], "出水口-污水",
                                ['all', ['==', ['get', 'SUBSID'], "跌水井"], ['==', ['get', 'CODE'], "WS"]], "跌水井-污水",
                                ['all', ['==', ['get', 'SUBSID'], "阀门"], ['==', ['get', 'CODE'], "WS"]], "阀门-污水",
                                ['all', ['==', ['get', 'SUBSID'], "非普查"], ['==', ['get', 'CODE'], "WS"]], "非普查-污水",
                                ['all', ['==', ['get', 'SUBSID'], "拐点"], ['==', ['get', 'CODE'], "WS"]], "拐点-污水",
                                ['all', ['==', ['get', 'SUBSID'], "化粪池"], ['==', ['get', 'CODE'], "WS"]], "化粪池-污水",
                                ['all', ['==', ['get', 'SUBSID'], "进水口"], ['==', ['get', 'CODE'], "WS"]], "进水口-污水",
                                ['all', ['==', ['get', 'SUBSID'], "净化池"], ['==', ['get', 'CODE'], "WS"]], "净化池-污水",
                                ['all', ['==', ['get', 'SUBSID'], "排水泵站"], ['==', ['get', 'CODE'], "WS"]], "排水泵站-污水",
                                ['all', ['==', ['get', 'SUBSID'], "水封井"], ['==', ['get', 'CODE'], "WS"]], "水封井-污水",
                                ['all', ['==', ['get', 'SUBSID'], "通风井"], ['==', ['get', 'CODE'], "WS"]], "通风井-污水",
                                ['all', ['==', ['get', 'SUBSID'], "污箅"], ['==', ['get', 'CODE'], "WS"]], "污箅-污水",
                                ['all', ['==', ['get', 'SUBSID'], "污水井"], ['==', ['get', 'CODE'], "WS"]], "污水井-污水",
                                ['all', ['==', ['get', 'SUBSID'], "一般管线点"], ['==', ['get', 'CODE'], "WS"]], "一般管线点-污水",
                                ['all', ['==', ['get', 'SUBSID'], "溢流井"], ['==', ['get', 'CODE'], "WS"]], "溢流井-污水",
                                ['all', ['==', ['get', 'SUBSID'], "雨箅"], ['==', ['get', 'CODE'], "WS"]], "雨箅-污水",
                                ['all', ['==', ['get', 'SUBSID'], "雨水井"], ['==', ['get', 'CODE'], "WS"]], "雨水井-污水",
                                ['all', ['==', ['get', 'SUBSID'], "预留口"], ['==', ['get', 'CODE'], "WS"]], "预留口-污水",
                                ['all', ['==', ['get', 'SUBSID'], "闸门井"], ['==', ['get', 'CODE'], "WS"]], "闸门井-污水",
                                ['==', ['get', 'SUBSID'], '渗水井'],
                                '渗水井', //图层名称
                                ['==', ['get', 'SUBSID'], '变径'],
                                '变径',
                                ['==', ['get', 'SUBSID'], '沉泥井'],
                                '沉泥井',
                                ['==', ['get', 'SUBSID'], '冲洗井'],
                                '冲洗井',
                                ['==', ['get', 'SUBSID'], '出地'],
                                '出地',
                                ['==', ['get', 'SUBSID'], '出气井'],
                                '出气井',
                                ['==', ['get', 'SUBSID'], '出水口'],
                                '出水口',
                                ['==', ['get', 'SUBSID'], '跌水井'],
                                '跌水井',
                                ['==', ['get', 'SUBSID'], '阀门'],
                                '阀门',
                                ['==', ['get', 'SUBSID'], '非普查'],
                                '非普查',
                                ['==', ['get', 'SUBSID'], '拐点'],
                                '拐点',
                                ['==', ['get', 'SUBSID'], '化粪池'],
                                '化粪池',
                                ['==', ['get', 'SUBSID'], '进水口'],
                                '进水口',
                                ['==', ['get', 'SUBSID'], '净化池'],
                                '净化池',
                                ['==', ['get', 'SUBSID'], '排水泵站'],
                                '排水泵站',
                                ['==', ['get', 'SUBSID'], '水封井'],
                                '水封井',
                                ['==', ['get', 'SUBSID'], '通风井'],
                                '通风井',
                                ['==', ['get', 'SUBSID'], '污箅'],
                                '污箅',
                                ['==', ['get', 'SUBSID'], '污水井'],
                                '污水井',
                                ['==', ['get', 'SUBSID'], '一般管线点'],
                                '一般管线点',
                                ['==', ['get', 'SUBSID'], '溢流井'],
                                '溢流井',
                                ['==', ['get', 'SUBSID'], '雨箅'],
                                '雨箅',
                                ['==', ['get', 'SUBSID'], '雨水井'],
                                '雨水井',
                                ['==', ['get', 'SUBSID'], '预留口'],
                                '预留口',
                                ['==', ['get', 'SUBSID'], '闸门井'],
                                '闸门井',
                                ['==', ['get', 'FEATURE'], '渗水井'],
                                '渗水井', //图层名称
                                ['==', ['get', 'FEATURE'], '变径'],
                                '变径',
                                ['==', ['get', 'FEATURE'], '沉泥井'],
                                '沉泥井',
                                ['==', ['get', 'FEATURE'], '冲洗井'],
                                '冲洗井',
                                ['==', ['get', 'FEATURE'], '出地'],
                                '出地',
                                ['==', ['get', 'FEATURE'], '出气井'],
                                '出气井',
                                ['==', ['get', 'FEATURE'], '出水口'],
                                '出水口',
                                ['==', ['get', 'FEATURE'], '跌水井'],
                                '跌水井',
                                ['==', ['get', 'FEATURE'], '阀门'],
                                '阀门',
                                ['==', ['get', 'FEATURE'], '非普查'],
                                '非普查',
                                ['==', ['get', 'FEATURE'], '拐点'],
                                '拐点',
                                ['==', ['get', 'FEATURE'], '化粪池'],
                                '化粪池',
                                ['==', ['get', 'FEATURE'], '进水口'],
                                '进水口',
                                ['==', ['get', 'FEATURE'], '净化池'],
                                '净化池',
                                ['==', ['get', 'FEATURE'], '排水泵站'],
                                '排水泵站',
                                ['==', ['get', 'FEATURE'], '水封井'],
                                '水封井',
                                ['==', ['get', 'FEATURE'], '通风井'],
                                '通风井',
                                ['==', ['get', 'FEATURE'], '污箅'],
                                '污箅',
                                ['==', ['get', 'FEATURE'], '污水井'],
                                '污水井',
                                ['==', ['get', 'FEATURE'], '一般管线点'],
                                '一般管线点',
                                ['==', ['get', 'FEATURE'], '溢流井'],
                                '溢流井',
                                ['==', ['get', 'FEATURE'], '雨箅'],
                                '雨箅',
                                ['==', ['get', 'FEATURE'], '雨水井'],
                                '雨水井',
                                ['==', ['get', 'FEATURE'], '预留口'],
                                '预留口',
                                ['==', ['get', 'FEATURE'], '闸门井'],
                                '闸门井',

                                'Default', // default
                            ],

                            // 'icon-rotate': ['get', rotateAngle], // 图标的顺时针旋转角度（可选，默认值为 0，单位：角度）

                            'icon-size': 0.12,
                        },
                        'paint': {
                            //	文本类属性（需要设置 text-field）
                            'text-opacity': 1, // 文本的不透明度（可选，取值范围为 0 ~ 1，默认值为 1）
                            'text-color': '#000000', // 文本的颜色（可选，默认值为 #000000）
                            'text-halo-color': '#ffffff', // 文本的光晕颜色（可选，默认值为 rgba(0,0,0,0)）
                            'text-halo-width': 1, // 文本的光晕宽度（可选，值 >= 0，默认值为 0，单位：像素）
                            'text-halo-blur': 1, // 文本的光晕模糊宽度（可选，值 >= 0，默认值为 0，单位：像素）
                            'text-translate': [0, 0], // 文本的平移（可选，通过平移 [x, y] 达到一定的偏移量。默认值为 [0, 0]，单位：像素。）
                            'text-translate-anchor': 'map', // 文本的平移锚点，即相对的参考物（可选，可选值为 map、viewport，默认为 map）
                        }
                    });
                } else {
                    // 两个注记字段
                    // 添加注记图层
                    that.map.addLayer({
                        id: layerId + "-point",
                        type: 'symbol',
                        source: layerId,
                        'minzoom': 18,
                        'layout': {
                            // 'visibility': 'visible', // 可见性（可选，可选值为 none、visible，默认值为 visible）
                            'symbol-placement': 'point', // 符号的位置（可选，可选值为 point、line、line-center，默认值为 point）
                            //	--- point：符号在几何形状的点上
                            //	--- line：符号在几何形状的线上（几何形状只能为 LineString 或 Polygon）
                            //	--- line-center：符号在几何形状的线的中心点上（几何形状只能为 LineString 或 Polygon）
                            // 'symbol-spacing': 600, // 符号之间的距离（可选，值 >= 1，默认值为 250，单位：像素。只有 symbol-placement 为 line 时才有效）
                            'symbol-avoid-edges': false, // 是否避免边缘冲突（可选，默认值为 false。当为 true 时，符号不会超过切片的边缘）
                            'symbol-sort-key': 1, // 排序的参考值（可选，无默认值。值越大，越在上方）
                            'symbol-z-order': 'auto', // z 轴上的顺序控制（可选，可选值为 auto、viewport-y、source，默认值为 auto）
                            //	文本类属性（需要指定 text-field）
                            'text-rotation-alignment': 'auto', // 与 icon-rotation-alignment 类似
                            'text-pitch-alignment': 'auto', // 与 icon-pitch-alignment 类似
                            'text-field': ['concat', ['get', annoFields[0]], ' ', ['get', annoFields[1]]],//['get', annoFields], // 文本所对应的字段（可选，默认值为 ''）
                            // 'text-font': ['Open Sans Blod', 'Arial Unicode MS Blod'], // 文本的字体集合（可选，默认值为 ['Open Sans Regular','Arial Unicode MS Regul
                            'text-size': 12, // 文本的大小（可选，默认值为 16，单位：像素）
                            'text-max-width': 10, // 文本的最大宽度，超过则折行（可选，默认值为 10，单位：ems）
                            'text-line-height': 1.2, // 文本的行高（可选，默认值为 1.2，单位：ems）
                            'text-letter-spacing': 0, // 文本的字符间距（可选，默认值为 0，单位：ems）
                            'text-justify': 'center', // 文本的水平对齐方式（可选，可选值为 auto、left、center、right。默认值为 center）
                            'text-anchor': 'bottom', // 文本与锚点的位置关系（可选，可选值为 center、left、right、top、bottom、top-left、top-right、bottom-left、bottom-right
                            'text-max-angle': 45, // 当 symbol-placement 为 line 或 line-center 时，文本相邻字符的最大夹角，默认 45 度
                            'text-rotate': 0, // 文本的顺时针旋转角度（可选，默认值为 0，单位：角度）
                            'text-padding': 8, // 文本的外边距（可选，值 >= 0，默认值为 2。可用于碰撞检测）
                            'text-keep-upright': false, // 当 icon-rotation-alignment 为 map，且 symbol-placement 为 line 或者 line-center 时，设置为 true 的话，可以避免文本上
                            'text-transform': 'none', // 文本大小写转换（可选，可选值为 none、uppercase、lowercase，默认值为 none）
                            'text-offset': [0, -1], // 图标的偏移量（可选，默认值为 [0, 0]）
                            'text-radial-offset': 0, // 文本的径向偏移量，优先级比 text-offset 高
                            'icon-allow-overlap': true, // 是否允许文本重叠（可选，默认值为 false。当值为 true 时，文本即使和其他符号触碰也会显示）
                            'text-allow-overlap': false, // 是否允许文本重叠（可选，默认值为 false。当值为 true 时，文本即使和其他符号触碰也会显示）
                            'text-ignore-placement': false, // 是否忽略文本位置（可选，默认值为 false。当值为 true 时，其他符号即使与此文本触碰也会显示）
                            'text-optional': true, // 文本是否可不显示（可选，默认值为 false。当值为 true 时，如果文本与图标碰撞，则显示图标）
                            'symbol-spacing': 25, // 图标间隔，默认为250

                            'icon-image': [ // icon图标，做判断，type_name为后端回传字段，判断type_name是否相等去显示图层
                                'case',
                                ['all', ['==', ['get', 'SUBSID'], "渗水井"], ['==', ['get', 'CODE'], "WS"]], "渗水井-污水",
                                ['all', ['==', ['get', 'SUBSID'], "变径"], ['==', ['get', 'CODE'], "WS"]], "变径-污水",
                                ['all', ['==', ['get', 'SUBSID'], "沉泥井"], ['==', ['get', 'CODE'], "WS"]], "沉泥井-污水",
                                ['all', ['==', ['get', 'SUBSID'], "冲洗井"], ['==', ['get', 'CODE'], "WS"]], "冲洗井-污水",
                                ['all', ['==', ['get', 'SUBSID'], "出地"], ['==', ['get', 'CODE'], "WS"]], "出地-污水",
                                ['all', ['==', ['get', 'SUBSID'], "出气井"], ['==', ['get', 'CODE'], "WS"]], "出气井-污水",
                                ['all', ['==', ['get', 'SUBSID'], "出水口"], ['==', ['get', 'CODE'], "WS"]], "出水口-污水",
                                ['all', ['==', ['get', 'SUBSID'], "跌水井"], ['==', ['get', 'CODE'], "WS"]], "跌水井-污水",
                                ['all', ['==', ['get', 'SUBSID'], "阀门"], ['==', ['get', 'CODE'], "WS"]], "阀门-污水",
                                ['all', ['==', ['get', 'SUBSID'], "非普查"], ['==', ['get', 'CODE'], "WS"]], "非普查-污水",
                                ['all', ['==', ['get', 'SUBSID'], "拐点"], ['==', ['get', 'CODE'], "WS"]], "拐点-污水",
                                ['all', ['==', ['get', 'SUBSID'], "化粪池"], ['==', ['get', 'CODE'], "WS"]], "化粪池-污水",
                                ['all', ['==', ['get', 'SUBSID'], "进水口"], ['==', ['get', 'CODE'], "WS"]], "进水口-污水",
                                ['all', ['==', ['get', 'SUBSID'], "净化池"], ['==', ['get', 'CODE'], "WS"]], "净化池-污水",
                                ['all', ['==', ['get', 'SUBSID'], "排水泵站"], ['==', ['get', 'CODE'], "WS"]], "排水泵站-污水",
                                ['all', ['==', ['get', 'SUBSID'], "水封井"], ['==', ['get', 'CODE'], "WS"]], "水封井-污水",
                                ['all', ['==', ['get', 'SUBSID'], "通风井"], ['==', ['get', 'CODE'], "WS"]], "通风井-污水",
                                ['all', ['==', ['get', 'SUBSID'], "污箅"], ['==', ['get', 'CODE'], "WS"]], "污箅-污水",
                                ['all', ['==', ['get', 'SUBSID'], "污水井"], ['==', ['get', 'CODE'], "WS"]], "污水井-污水",
                                ['all', ['==', ['get', 'SUBSID'], "一般管线点"], ['==', ['get', 'CODE'], "WS"]], "一般管线点-污水",
                                ['all', ['==', ['get', 'SUBSID'], "溢流井"], ['==', ['get', 'CODE'], "WS"]], "溢流井-污水",
                                ['all', ['==', ['get', 'SUBSID'], "雨箅"], ['==', ['get', 'CODE'], "WS"]], "雨箅-污水",
                                ['all', ['==', ['get', 'SUBSID'], "雨水井"], ['==', ['get', 'CODE'], "WS"]], "雨水井-污水",
                                ['all', ['==', ['get', 'SUBSID'], "预留口"], ['==', ['get', 'CODE'], "WS"]], "预留口-污水",
                                ['all', ['==', ['get', 'SUBSID'], "闸门井"], ['==', ['get', 'CODE'], "WS"]], "闸门井-污水",
                                ['==', ['get', 'SUBSID'], '渗水井'],
                                '渗水井', //图层名称
                                ['==', ['get', 'SUBSID'], '变径'],
                                '变径',
                                ['==', ['get', 'SUBSID'], '沉泥井'],
                                '沉泥井',
                                ['==', ['get', 'SUBSID'], '冲洗井'],
                                '冲洗井',
                                ['==', ['get', 'SUBSID'], '出地'],
                                '出地',
                                ['==', ['get', 'SUBSID'], '出气井'],
                                '出气井',
                                ['==', ['get', 'SUBSID'], '出水口'],
                                '出水口',
                                ['==', ['get', 'SUBSID'], '跌水井'],
                                '跌水井',
                                ['==', ['get', 'SUBSID'], '阀门'],
                                '阀门',
                                ['==', ['get', 'SUBSID'], '非普查'],
                                '非普查',
                                ['==', ['get', 'SUBSID'], '拐点'],
                                '拐点',
                                ['==', ['get', 'SUBSID'], '化粪池'],
                                '化粪池',
                                ['==', ['get', 'SUBSID'], '进水口'],
                                '进水口',
                                ['==', ['get', 'SUBSID'], '净化池'],
                                '净化池',
                                ['==', ['get', 'SUBSID'], '排水泵站'],
                                '排水泵站',
                                ['==', ['get', 'SUBSID'], '水封井'],
                                '水封井',
                                ['==', ['get', 'SUBSID'], '通风井'],
                                '通风井',
                                ['==', ['get', 'SUBSID'], '污箅'],
                                '污箅',
                                ['==', ['get', 'SUBSID'], '污水井'],
                                '污水井',
                                ['==', ['get', 'SUBSID'], '一般管线点'],
                                '一般管线点',
                                ['==', ['get', 'SUBSID'], '溢流井'],
                                '溢流井',
                                ['==', ['get', 'SUBSID'], '雨箅'],
                                '雨箅',
                                ['==', ['get', 'SUBSID'], '雨水井'],
                                '雨水井',
                                ['==', ['get', 'SUBSID'], '预留口'],
                                '预留口',
                                ['==', ['get', 'SUBSID'], '闸门井'],
                                '闸门井',
                                ['==', ['get', 'FEATURE'], '渗水井'],
                                '渗水井', //图层名称
                                ['==', ['get', 'FEATURE'], '变径'],
                                '变径',
                                ['==', ['get', 'FEATURE'], '沉泥井'],
                                '沉泥井',
                                ['==', ['get', 'FEATURE'], '冲洗井'],
                                '冲洗井',
                                ['==', ['get', 'FEATURE'], '出地'],
                                '出地',
                                ['==', ['get', 'FEATURE'], '出气井'],
                                '出气井',
                                ['==', ['get', 'FEATURE'], '出水口'],
                                '出水口',
                                ['==', ['get', 'FEATURE'], '跌水井'],
                                '跌水井',
                                ['==', ['get', 'FEATURE'], '阀门'],
                                '阀门',
                                ['==', ['get', 'FEATURE'], '非普查'],
                                '非普查',
                                ['==', ['get', 'FEATURE'], '拐点'],
                                '拐点',
                                ['==', ['get', 'FEATURE'], '化粪池'],
                                '化粪池',
                                ['==', ['get', 'FEATURE'], '进水口'],
                                '进水口',
                                ['==', ['get', 'FEATURE'], '净化池'],
                                '净化池',
                                ['==', ['get', 'FEATURE'], '排水泵站'],
                                '排水泵站',
                                ['==', ['get', 'FEATURE'], '水封井'],
                                '水封井',
                                ['==', ['get', 'FEATURE'], '通风井'],
                                '通风井',
                                ['==', ['get', 'FEATURE'], '污箅'],
                                '污箅',
                                ['==', ['get', 'FEATURE'], '污水井'],
                                '污水井',
                                ['==', ['get', 'FEATURE'], '一般管线点'],
                                '一般管线点',
                                ['==', ['get', 'FEATURE'], '溢流井'],
                                '溢流井',
                                ['==', ['get', 'FEATURE'], '雨箅'],
                                '雨箅',
                                ['==', ['get', 'FEATURE'], '雨水井'],
                                '雨水井',
                                ['==', ['get', 'FEATURE'], '预留口'],
                                '预留口',
                                ['==', ['get', 'FEATURE'], '闸门井'],
                                '闸门井',

                                'Default', // default
                            ],
                            'icon-rotate': ['coalesce', ['to-number', ['get', 'exRotation']], 0], // 图标的顺时针旋转角度（可选，默认值为 0，单位：角度）
                            'icon-size': 0.11,
                        },
                        'paint': {
                            //	文本类属性（需要设置 text-field）
                            'text-opacity': 1, // 文本的不透明度（可选，取值范围为 0 ~ 1，默认值为 1）
                          'text-color': '#000000', // 文本的颜色（可选，默认值为 #000000）
                          'text-halo-color': '#ffffff', // 文本的光晕颜色（可选，默认值为 rgba(0,0,0,0)）
                            'text-halo-width': 1, // 文本的光晕宽度（可选，值 >= 0，默认值为 0，单位：像素）
                            'text-halo-blur': 1, // 文本的光晕模糊宽度（可选，值 >= 0，默认值为 0，单位：像素）
                            'text-translate': [0, 0], // 文本的平移（可选，通过平移 [x, y] 达到一定的偏移量。默认值为 [0, 0]，单位：像素。）
                            'text-translate-anchor': 'map', // 文本的平移锚点，即相对的参考物（可选，可选值为 map、viewport，默认为 map）
                        }
                    });
                }


                // 加载线段鼠标事件
                that.loadVectorLayerMouseEvent(layerId + '-point', layerId, 'point');

                // 测试变化样式
                // setTimeout(() => {
                //     that.changePointIconAnno(layerId, 'WS10', '雨水井', ['111', '222']);
                // }, 10000);

                that.$map.once('idle', function () {
                    console.log('图层已成功添加并渲染完成2222222222222222222222');
                    // 在这里执行添加成功后的操作
                    that.maskLayerCount--;
                    if (that.maskLayerCount <= 0) {
                        console.log("关闭遮罩层111111")
                        that.loadingMask.close();
                    }
                });

            }).catch((err) => {
                console.error("加载管线点数据错误:", err);
                this.loadingMask.close();
            });
        },
        // 加载管线矢量数据
        initVectorLineLayer2(projectId, layerName, layerId) {
            // 设置矢量图层属性
            let that = this;
            let params = {
                "projectId": projectId,
                "layerId": layerId
            };

            that.setVectorLayerKeys([{
                value: layerId,
                label: layerName
            }]);

            PiplineProjectController.ListLayerGeojson(this, params, null, { showMask: false }).then((res) => {
                console.log("加载管线矢量数据 GetProjectLayerGeoJson：", res)

                // 拼接GeoJson数据
                let GeoJsonData = {
                    type: "FeatureCollection",
                    features: res.geoJsonFeatures
                };

                // 添加数据源
                that.map.addSource(layerId, {
                    type: 'geojson',
                    data: GeoJsonData,
                    generateId: true // 自动生成id,否则选中图形时没有feature-id
                });

                let annoFields = [];
                this.getCurrentProjectConfig.data.forEach(item => {
                    if (item.layerId === layerId) {
                        annoFields[0] = item.labelFields[0];//只选择一个
                        annoFields[1] = item.labelFields[1];//只选择一个
                    }
                });

                if (annoFields.length === 0 || annoFields === undefined) {
                    annoFields[0] = "MATERIAL";
                } else if (res.geoJsonFeatures[0].properties[annoFields] === undefined) {
                    annoFields[0] = "MATERIAL";
                }

                // 当前图层显示注记字段
                console.log("annoFields:", annoFields);

                // 添加线图层
                that.map.addLayer({
                    id: layerId + "-line",
                    type: 'line',
                    source: layerId,
                    paint: {
                        'line-opacity': 0.8,
                        'line-color': [
                            'case',
                            ['boolean', ['feature-state', 'click'], false],
                            '#ff0000', // 选中时红色
                            ['boolean', ['feature-state', 'hover'], false],
                            '#17b8be', // 选中时蓝色
                            ['boolean', ['feature-state', 'YS'], false],
                            '#17b8be', // 设置雨水管时蓝色
                            ['boolean', ['feature-state', 'WS'], false],
                            '#FF6347', // 设置污水管时红色
                            ['==', ['get', 'CODE'], 'YS'], '#17b8be',  // 属性值是字符串类型的数字，用to-number，大于150的值：蓝色
                            '#FF6347',  // 默认红色
                        ],
                        'line-width': [
                            'case',
                            ['boolean', ['feature-state', 'click'], false],
                            3,         // 选中时加粗
                            ['boolean', ['feature-state', 'hover'], false],
                            3,         // 选中时加粗
                            2
                        ],
                        'line-gap-width': [
                            'case',
                            ['boolean', ['feature-state', 'click'], false],
                            2, // 选中时虚线
                            ['boolean', ['feature-state', 'hover'], false],
                            2, // 选中时虚线
                            0 // 默认实线
                        ]
                    }
                });

                if (annoFields.length < 2) {
                    // 添加注记图层 线条
                    that.map.addLayer({
                        id: layerId + "-label",
                        type: 'symbol',
                        'minzoom': 17,
                        source: layerId,
                        'layout': {
                            // 'visibility': 'visible', // 可见性（可选，可选值为 none、visible，默认值为 visible）
                            'symbol-placement': 'line-center', // 符号的位置（可选，可选值为 point、line、line-center，默认值为 point）
                            //	--- point：符号在几何形状的点上
                            //	--- line：符号在几何形状的线上（几何形状只能为 LineString 或 Polygon）
                            //	--- line-center：符号在几何形状的线的中心点上（几何形状只能为 LineString 或 Polygon）
                            'symbol-spacing': 600, // 符号之间的距离（可选，值 >= 1，默认值为 250，单位：像素。只有 symbol-placement 为 line 时才有效）
                            'symbol-avoid-edges': false, // 是否避免边缘冲突（可选，默认值为 false。当为 true 时，符号不会超过切片的边缘）
                            'symbol-sort-key': 1, // 排序的参考值（可选，无默认值。值越大，越在上方）
                            'symbol-z-order': 'auto', // z 轴上的顺序控制（可选，可选值为 auto、viewport-y、source，默认值为 auto）
                            //	文本类属性（需要指定 text-field）
                            'text-rotation-alignment': 'auto', // 与 icon-rotation-alignment 类似
                            'text-pitch-alignment': 'auto', // 与 icon-pitch-alignment 类似
                            'text-field': ['get', annoFields[0]], // 文本所对应的字段（可选，默认值为 ''）
                            // 'text-font': ['Open Sans Blod', 'Arial Unicode MS Blod'], // 文本的字体集合（可选，默认值为 ['Open Sans Regular','Arial Unicode MS Regul
                            'text-size': 12, // 文本的大小（可选，默认值为 16，单位：像素）
                            'text-max-width': 10, // 文本的最大宽度，超过则折行（可选，默认值为 10，单位：ems）
                            'text-line-height': 1.2, // 文本的行高（可选，默认值为 1.2，单位：ems）
                            'text-letter-spacing': 0, // 文本的字符间距（可选，默认值为 0，单位：ems）
                            'text-justify': 'center', // 文本的水平对齐方式（可选，可选值为 auto、left、center、right。默认值为 center）
                            'text-anchor': 'bottom', // 文本与锚点的位置关系（可选，可选值为 center、left、right、top、bottom、top-left、top-right、bottom-left、bottom-right
                            'text-max-angle': 45, // 当 symbol-placement 为 line 或 line-center 时，文本相邻字符的最大夹角，默认 45 度
                            'text-rotate': 0, // 文本的顺时针旋转角度（可选，默认值为 0，单位：角度）
                            'text-padding': 8, // 文本的外边距（可选，值 >= 0，默认值为 2。可用于碰撞检测）
                            'text-keep-upright': true, // 当 icon-rotation-alignment 为 map，且 symbol-placement 为 line 或者 line-center 时，设置为 true 的话，可以避免文本上
                            'text-transform': 'none', // 文本大小写转换（可选，可选值为 none、uppercase、lowercase，默认值为 none）
                            'text-offset': [0, -1], // 图标的偏移量（可选，默认值为 [0, 0]）
                            'text-radial-offset': 0, // 文本的径向偏移量，优先级比 text-offset 高
                            "icon-ignore-placement": true,
                            'text-allow-overlap': false, // 是否允许文本重叠（可选，默认值为 false。当值为 true 时，文本即使和其他符号触碰也会显示）
                            'text-ignore-placement': false, // 是否忽略文本位置（可选，默认值为 false。当值为 true 时，其他符号即使与此文本触碰也会显示）
                            'text-optional': true, // 文本是否可不显示（可选，默认值为 false。当值为 true 时，如果文本与图标碰撞，则显示图标）
                            'symbol-spacing': 250, // 图标间隔，默认为250
                            // 'icon-image': 'arrowIcon', // 箭头图标
                            'icon-size': 0.5
                        },
                        'paint': {
                            //	文本类属性（需要设置 text-field）
                            'text-opacity': 1, // 文本的不透明度（可选，取值范围为 0 ~ 1，默认值为 1）
                          'text-color': '#000000', // 文本的颜色（可选，默认值为 #000000）
                          'text-halo-color': '#ffffff', // 文本的光晕颜色（可选，默认值为 rgba(0,0,0,0)）
                            'text-halo-width': 1, // 文本的光晕宽度（可选，值 >= 0，默认值为 0，单位：像素）
                            'text-halo-blur': 1, // 文本的光晕模糊宽度（可选，值 >= 0，默认值为 0，单位：像素）
                            'text-translate': [0, 0], // 文本的平移（可选，通过平移 [x, y] 达到一定的偏移量。默认值为 [0, 0]，单位：像素。）
                            'text-translate-anchor': 'map', // 文本的平移锚点，即相对的参考物（可选，可选值为 map、viewport，默认为 map）
                        }
                    });
                } else {
                    that.map.addLayer({
                        id: layerId + "-label",
                        type: 'symbol',
                        'minzoom': 17,
                        source: layerId,
                        'layout': {
                            // 'visibility': 'visible', // 可见性（可选，可选值为 none、visible，默认值为 visible）
                            'symbol-placement': 'line-center', // 符号的位置（可选，可选值为 point、line、line-center，默认值为 point）
                            //	--- point：符号在几何形状的点上
                            //	--- line：符号在几何形状的线上（几何形状只能为 LineString 或 Polygon）
                            //	--- line-center：符号在几何形状的线的中心点上（几何形状只能为 LineString 或 Polygon）
                            'symbol-spacing': 600, // 符号之间的距离（可选，值 >= 1，默认值为 250，单位：像素。只有 symbol-placement 为 line 时才有效）
                            'symbol-avoid-edges': false, // 是否避免边缘冲突（可选，默认值为 false。当为 true 时，符号不会超过切片的边缘）
                            'symbol-sort-key': 1, // 排序的参考值（可选，无默认值。值越大，越在上方）
                            'symbol-z-order': 'auto', // z 轴上的顺序控制（可选，可选值为 auto、viewport-y、source，默认值为 auto）
                            //	文本类属性（需要指定 text-field）
                            'text-rotation-alignment': 'auto', // 与 icon-rotation-alignment 类似
                            'text-pitch-alignment': 'map', // 与 icon-pitch-alignment 类似
                            'text-field': ['concat', ['get', annoFields[0]], ' ', ['get', annoFields[1]]],//['get', annoFields], // 文本所对应的字段（可选，默认值为 ''）
                            // 'text-font': ['Open Sans Blod', 'Arial Unicode MS Blod'], // 文本的字体集合（可选，默认值为 ['Open Sans Regular','Arial Unicode MS Regul
                            'text-size': 12, // 文本的大小（可选，默认值为 16，单位：像素）
                            'text-max-width': 10, // 文本的最大宽度，超过则折行（可选，默认值为 10，单位：ems）
                            'text-line-height': 1.2, // 文本的行高（可选，默认值为 1.2，单位：ems）
                            'text-letter-spacing': 0, // 文本的字符间距（可选，默认值为 0，单位：ems）
                            'text-justify': 'center', // 文本的水平对齐方式（可选，可选值为 auto、left、center、right。默认值为 center）
                            'text-anchor': 'bottom', // 文本与锚点的位置关系（可选，可选值为 center、left、right、top、bottom、top-left、top-right、bottom-left、bottom-right
                            'text-max-angle': 45, // 当 symbol-placement 为 line 或 line-center 时，文本相邻字符的最大夹角，默认 45 度
                            'text-rotate': 0, // 文本的顺时针旋转角度（可选，默认值为 0，单位：角度）
                            'text-padding': 8, // 文本的外边距（可选，值 >= 0，默认值为 2。可用于碰撞检测）
                            'text-keep-upright': true, // 当 icon-rotation-alignment 为 map，且 symbol-placement 为 line 或者 line-center 时，设置为 true 的话，可以避免文本上
                            'text-transform': 'none', // 文本大小写转换（可选，可选值为 none、uppercase、lowercase，默认值为 none）
                            'text-offset': [0, -1], // 图标的偏移量（可选，默认值为 [0, 0]）
                            'text-radial-offset': 0, // 文本的径向偏移量，优先级比 text-offset 高
                            "icon-ignore-placement": true,
                            'text-allow-overlap': false, // 是否允许文本重叠（可选，默认值为 false。当值为 true 时，文本即使和其他符号触碰也会显示）
                            'text-ignore-placement': false, // 是否忽略文本位置（可选，默认值为 false。当值为 true 时，其他符号即使与此文本触碰也会显示）
                            'text-optional': true, // 文本是否可不显示（可选，默认值为 false。当值为 true 时，如果文本与图标碰撞，则显示图标）
                            'symbol-spacing': 250, // 图标间隔，默认为250
                            // 'icon-image': 'arrowIcon', // 箭头图标
                            'icon-size': 0.5
                        },
                        'paint': {
                            //	文本类属性（需要设置 text-field）
                            'text-opacity': 1, // 文本的不透明度（可选，取值范围为 0 ~ 1，默认值为 1）
                          'text-color': '#000000', // 文本的颜色（可选，默认值为 #000000）
                          'text-halo-color': '#ffffff', // 文本的光晕颜色（可选，默认值为 rgba(0,0,0,0)）
                            'text-halo-width': 1, // 文本的光晕宽度（可选，值 >= 0，默认值为 0，单位：像素）
                            'text-halo-blur': 1, // 文本的光晕模糊宽度（可选，值 >= 0，默认值为 0，单位：像素）
                            'text-translate': [0, 0], // 文本的平移（可选，通过平移 [x, y] 达到一定的偏移量。默认值为 [0, 0]，单位：像素。）
                            'text-translate-anchor': 'map', // 文本的平移锚点，即相对的参考物（可选，可选值为 map、viewport，默认为 map）
                        }
                    });
                }

                // 加载线段鼠标事件
                that.loadVectorLayerMouseEvent(layerId + '-line', layerId, 'line');

                // 加载线段流图
                that.initVectorLineFlowLayer({
                    crs: {
                        type: "name",
                        properties: {
                            name: "urn:ogc:def:crs:EPSG::4490"
                        }
                    },
                    name: "aaa" + layerId + '-line',
                    ...GeoJsonData
                });

                // 监听地图空闲状态（表示渲染完成）
                that.$map.once('idle', function () {
                    console.log('图层已成功添加并渲染完成2222222222222222222222');
                    // 在这里执行添加成功后的操作
                    that.maskLayerCount--;
                    if (that.maskLayerCount <= 0) {
                        console.log("关闭遮罩层222222")
                        that.loadingMask.close();
                    }
                });

            }).catch((err) => {
                console.error("加载管线矢量数据错误:", err);
            });
        },
        // 加载管线流动图层
        initVectorLineFlowLayer(geojson) {
            let that = this;
            console.log("geojson:", geojson)
            const layer = new LineLayer({
                minZoom: 15
            })
                .source(geojson)
                .shape('line')
                .color('CODE', (v) => {
                    // let num = Number(v);
                    // if (num >= 200) {
                    //     return '#4F46E5'; //蓝色
                    // } else {
                    //     return '#ff0000'; //红色
                    // }
                    if (v == 'YS') {
                        return '#4F46E5'; //蓝色
                    } else {
                        return '#c80202'; //红色
                    }
                })
                .animate({
                    interval: 1, // 间隔
                    duration: 2, // 持续时间，延时
                    trailLength: 0.2, // 流线长度
                });
            this.scene.addLayer(layer);
            // this.flowLineLayerData.push({
            //     layerId: geojson.name,
            //     layerObj: layer
            // });
            this.flowLineLayerData[geojson.name] = layer;

            // 测试更改流线图样式
            // 需要参数：图层ID，线段主键值，流向（'reverse'反向，其他字符串不变流向），颜色（YS蓝色，WS红色）
            // setTimeout(() => {
            //     that.changeLineFlowDirectionColor(geojson.name.replace('aaa', '').replace('-line', ''), '33', 'reverse', 'WS');
            //     that.changeLineAnnoColor(geojson.name.replace('aaa', '').replace('-line', ''), '33', ["777", '888'], 'WS');
            // }, 15000);
        },
        /* 切换管点图标和注记名称
            layerId: 图层ID
            pointId: 点主键值
            pointType: 点类型（渗水井、雨水井、污水井等）。不修改传null
            labelFields: 两个注记字段值，数组形式传入，如['value1','value2']。不修改传null
            exRotation: 角度（顺时针旋转角度，0-360）。不修改传null
            (1212112121221,'WS10','雨水井',['777','888'],30)
        */
        changePointIconAnno(dataList) {
            // changePointIconAnno(layerId, pointId, pointType, labelFields, exRotation) {
            // 获取注记图层
            let that = this;
            let layerId = dataList[0].layerId;
            let layer = this.map.getLayer(layerId + '-point');
            if (!layer) {
                console.log("未找到管点图层", layerId + '-point');
                return;
            }

            // 从点数据集中找到对应点，修改类型属性
            let source = this.map.getSource(layerId);

            if (!source) {
                console.log("未找到管点图层数据源", layerId + '-point');
                return;
            }

            // 1. 获取当前图层数据
            const currentData = source._options.data.features;
            if (!currentData || currentData.length === 0) {
                console.log("当前图层数据为空，无法更改图标");
                return;
            }

            // 2. 找到需要更改图标的点(根据主键匹配)
            let primaryKey = this.getCurrentProjectConfig.data.find(item => item.layerId === layerId).primaryKey;
            // console.log("primaryKey:", primaryKey)
            // console.log("currentData:", currentData)

            // 遍历dataList，批量改点的图标和注记
            for (let i = 0; i < dataList.length; i++) {
                let pointId = dataList[i].pointId;
                let pointType = dataList[i].pointType;
                let labelFields = dataList[i].labelFields;
                let exRotation = dataList[i].exRotation;

                const pointIndex = currentData.findIndex(item => item.properties[primaryKey] == pointId);
                if (pointIndex === -1) {
                    console.log("未找到对应点，无法更改图标", pointId);
                    return;
                }

                if (labelFields !== null && labelFields !== undefined && labelFields.length !== 0) {

                    // 根据当前图层配置获取注记字段
                    let labelFieldsConfig = [];
                    this.getCurrentProjectConfig.data.forEach(item => {
                        if (item.layerId === layerId) {
                            labelFieldsConfig[0] = item.labelFields[0];
                            if (item.labelFields.length > 1)
                                labelFieldsConfig[1] = item.labelFields[1];
                        }
                    });

                    console.log("labelFieldsConfig:", labelFieldsConfig)

                    // 修改注记字段值1,2
                    if (labelFieldsConfig[0] && labelFieldsConfig[0] !== '') {
                        currentData[pointIndex].properties = {
                            ...currentData[pointIndex].properties,
                            [labelFieldsConfig[0]]: labelFields[0]
                        };
                    }
                    if (labelFieldsConfig[1] && labelFieldsConfig[1] !== '') {
                        currentData[pointIndex].properties = {
                            ...currentData[pointIndex].properties,
                            [labelFieldsConfig[1]]: labelFields[1]
                        };
                    }
                }

                if (pointType !== null || pointType !== undefined || pointType !== '') {
                    // 修改FEATURE或SUBSID属性为对应点类型
                    currentData[pointIndex].properties = {
                        ...currentData[pointIndex].properties,
                        'FEATURE': pointType,//暂时两个属性都设置
                        'SUBSID': pointType,//暂时两个属性都设置
                    };
                }

                if (exRotation !== null || exRotation !== undefined || exRotation !== '') {
                    // 修改FEATURE或SUBSID属性为对应点类型
                    currentData[pointIndex].properties = {
                        ...currentData[pointIndex].properties,
                        'exRotation': exRotation,
                    };
                }
            }

            // 4. 更新数据集(触发图层重绘)
            const newGeoJSONData = {
                type: 'FeatureCollection',
                features: [...currentData]
            };
            source.setData(newGeoJSONData);

        },
        /* 切换线图层样式
            ***dataList数组只能传入同一图层的数据***
            dataList: [{
                layerId: '', //图层ID
                lineId: '', //线段主键值
                labelFields: [], //注记字段值
                flowDirect: '', //流向
                pipType: '' //管类型
            }]
            layerId: 图层ID
            lineId: 线段主键值
            labelFields: 两个注记字段值，数组形式传入，如['value1','value2']。如果不修改注记名称则传null
            flowDirect: 流向（'reverse'反向）。传空字符串不变流向
            pipType: 颜色（YS雨水管：蓝色，WS污水管：红色）
            (1212112121221,33,'reverse','WS',['777','888'])
        */
        changeLineStyle(dataList) {
            // this.changeLineFlowDirectionColor(layerId, lineId, flowDirect, pipType);
            // this.changeLineAnnoColor(layerId, lineId, labelFields, pipType);
            this.changeLineFlowDirectionColor(dataList);
            this.changeLineAnnoColor(dataList);
        },
        /*  切换管线注记图层颜色(管类型)和注记名称
            layerId: 图层ID
            lineId: 线段主键值
            labelFields: 两个注记字段值，数组形式传入，如['value1','value2']，如果不修改注记名称则传null
            pipType: 颜色（YS雨水管：蓝色，WS污水管：红色）
        */
        changeLineAnnoColor(dataList) {
            // changeLineAnnoColor(layerId, lineId, labelFields, pipType) {
            let layerId = dataList[0].layerId;

            let that = this;
            // 获取注记图层
            let anno_layer = this.map.getLayer(layerId + '-label');
            if (!anno_layer) {
                console.log("未找到注记图层或线图层", layerId + '-label', layerId + '-line');
                return;
            }

            // 修改数据集
            let source = this.map.getSource(layerId);
            if (!source) {
                console.log("未找到注记图层数据源", layerId + '-label');
                return;
            }

            // 1. 获取当前图层数据
            const currentData = source._options.data.features;
            if (!currentData || currentData.length === 0) {
                console.log("当前图层数据为空，无法更改注记");
                return;
            }

            // 2. 找到需要更改注记的线段(根据主键匹配)
            let primaryKey = this.getCurrentProjectConfig.data.find(item => item.layerId === layerId).primaryKey;

            // 遍历dataList，批量改管线的注记和颜色
            for (let i = 0; i < dataList.length; i++) {
                let lineId = dataList[i].lineId;
                let labelFields = dataList[i].labelFields;
                let pipType = dataList[i].pipType;

                const segmentIndex = currentData.findIndex(item => item.properties[primaryKey] == lineId);
                if (segmentIndex === -1) {
                    console.log("未找到对应线段，无法更改注记", lineId);
                    return;
                }

                if (labelFields !== null && labelFields !== undefined && labelFields.length !== 0) {
                    // 3.根据当前图层配置获取注记字段
                    let labelFieldsConfig = [];
                    this.getCurrentProjectConfig.data.forEach(item => {
                        if (item.layerId === layerId) {
                            labelFieldsConfig[0] = item.labelFields[0];
                            if (item.labelFields.length > 1)
                                labelFieldsConfig[1] = item.labelFields[1];
                        }
                    });

                    console.log("labelFieldsConfig:", labelFieldsConfig)

                    // 4. 修改注记字段值1,2
                    if (labelFieldsConfig[0] && labelFieldsConfig[0] !== '') {
                        currentData[segmentIndex].properties = {
                            ...currentData[segmentIndex].properties,
                            [labelFieldsConfig[0]]: labelFields[0]
                        };
                    }
                    if (labelFieldsConfig[1] && labelFieldsConfig[1] !== '') {
                        currentData[segmentIndex].properties = {
                            ...currentData[segmentIndex].properties,
                            [labelFieldsConfig[1]]: labelFields[1]
                        };
                    }
                }

                if (pipType !== null && pipType !== undefined && pipType !== '') {
                    // 3. 修改CODE属性为YS或WS
                    currentData[segmentIndex].properties = {
                        ...currentData[segmentIndex].properties,
                        CODE: pipType // 假设颜色属性字段为 'CODE'
                    };
                }
            }

            // 5. 更新数据集(触发图层重绘)
            const newGeoJSONData = {
                type: 'FeatureCollection',
                features: [...currentData]
            };
            source.setData(newGeoJSONData);
        },
        /*  切换管线流动图层流向和颜色(管类型)
            layerId: 图层ID
            lineId: 线段主键值
            direction: 流向（'reverse'反向，其他字符串不变流向）
            pipType: 颜色（YS雨水管：蓝色，WS污水管：红色）
        */
        changeLineFlowDirectionColor(dataList) {
            // changeLineFlowDirectionColor(layerId, lineId, direction, pipType) {
            let layerId = dataList[0].layerId;
            let layer = this.flowLineLayerData["aaa" + layerId + '-line'];
            if (!layer) {
                console.log("未找到流动图层", "aaa" + layerId + '-line');
                return;
            }

            // 0. 获取当前项目当前图层主键
            let primaryKey = this.getCurrentProjectConfig.data.find(item => item.layerId === layerId).primaryKey;

            // 1. 获取当前图层数据
            const currentData = layer.getSource().data;

            // console.log("currentData5sa14d654as6d4:", currentData)
            if (!currentData || currentData.dataArray.length === 0) {
                console.log("当前图层数据为空，无法更改流向");
                return;
            }

            // console.log("currentData5sa14d654as6d4:", currentData)
            // 批量改管线的流向和颜色
            for (let i = 0; i < dataList.length; i++) {
                let lineId = dataList[i].lineId;
                let direction = dataList[i].direction;
                let pipType = dataList[i].pipType;

                // console.log("lineId, direction, pipType:", lineId, direction, pipType)
                // 2. 找到需要反转的线段(根据主键匹配)
                const segmentIndex = currentData.dataArray.findIndex(item => item[primaryKey] == lineId);

                if (segmentIndex === -1) {
                    console.log("未找到对应线段，无法更改流向", lineId);
                    return;
                }

                // 3. 创建新数据（不改变原始数据）
                const newData = [...currentData.dataArray];
                // console.log("newData654as6d4:", newData)
                if (direction === 'reverse') {
                    // 反转坐标
                    newData[segmentIndex] = {
                        ...newData[segmentIndex],
                        coordinates: [...newData[segmentIndex].coordinates].reverse()
                    };
                }

                // 4. 更改颜色（如果提供了颜色参数）
                if (pipType === 'YS') {
                    // 更改颜色属性
                    newData[segmentIndex] = {
                        ...newData[segmentIndex],
                        CODE: 'YS' // 假设颜色属性字段为 'CODE'
                    };
                } else if (pipType === 'WS') {
                    newData[segmentIndex] = {
                        ...newData[segmentIndex],
                        CODE: 'WS' // 假设颜色属性字段为 'CODE'
                    };
                }

                // 5. 更新图层数据
                layer.setData(newData, {
                    parser: {
                        type: 'json',
                        coordinates: 'coordinates'
                    }
                });
            }

            // 6. 刷新图层
            this.scene.render();
        },
        // 切换地图底图
        changeBaseMap(baseMap) {
            if (baseMap === '天地图影像') {
                this.map.setLayoutProperty('tdt-vec-layer', 'visibility', 'none');
                this.map.setLayoutProperty('tdt-cva-layer', 'visibility', 'none');
                this.map.setLayoutProperty('tdt-img-layer', 'visibility', 'visible');
                this.map.setLayoutProperty('tdt-cia-layer', 'visibility', 'visible');
            } else if (baseMap === '天地图矢量') {
                this.map.setLayoutProperty('tdt-vec-layer', 'visibility', 'visible');
                this.map.setLayoutProperty('tdt-cva-layer', 'visibility', 'visible');
                this.map.setLayoutProperty('tdt-img-layer', 'visibility', 'none');
                this.map.setLayoutProperty('tdt-cia-layer', 'visibility', 'none');
            }
        },
        destroyMap() {
            EventBus.$off('changeLineStyle');
            EventBus.$off('changePointStyle');
        },
        // 获取图层所有属性键
        getAllPropertyKeys(layerSourceId) {
            const features = this.map.querySourceFeatures(layerSourceId);
            const keysSet = new Set();

            Object.keys(features[0].properties).forEach(key => {
                keysSet.add(key);
            });

            return Array.from(keysSet);
        },
        // 获取图层所有属性值
        getAllPropertyValues(layerSourceId) {
            const features = this.map.querySourceFeatures(layerSourceId);
            const valuesSet = [];
            features.forEach(feature => {
                valuesSet.push(feature.properties);
            });
            return Array.from(valuesSet);
        },
        // 添加定位图标
        addLocateIcon(lng, lat) {
            if (this.map.getLayer('iconImage')) {
                this.map.removeLayer('iconImage');
            }
            if (this.map.getSource('iconImage')) {
                this.map.removeSource('iconImage');
            }

            console.log("lng, lat", lng, lat)
            let feature = {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [lng, lat]
                },
            };

            this.map.addSource('iconImage', {
                type: 'geojson',
                data: {
                    type: 'FeatureCollection',
                    features: [feature]
                }
            })

            this.map.addLayer({
                id: 'iconImage',
                type: 'symbol',
                source: 'iconImage',
                layout: {
                    'icon-image': 'location',
                    'icon-size': 0.03
                }
            })
        },
        // 设置图层可见性
        setLayerVisibleByKeys(layerKeys, visible) {
            layerKeys.forEach(key => {
                if (this.map.getLayer(key)) {
                    this.map.setLayoutProperty(key, 'visibility', visible ? 'visible' : 'none');
                }
            });
        },
        ...mapMutations(['setVectorLayerKeys'])
    }
};
</script>

<style scoped>
#map {
    cursor: default !important;
    width: 100%;
    height: 100%;
}

/* 鼠标样式换成默认*/
::v-deep .l7-marker-container {
    cursor: default;
}

::v-deep .mapboxgl-popup {
    width: 400px !important;
    max-height: 500px !important;
    max-width: 400px !important;
    z-index: 3 !important;
}

::v-deep .mapboxgl-popup-close-button {
    /* margin-top: 1px; */
    margin-right: 2px;
}
</style>
